<template>
  <div>
    <el-form style="display: inline-block;margin: 20px" ref="form" :model="form" label-width="80px">
      <el-form-item label="异常号码" prop="sendTel">
        <el-select v-model="sendTel">
          <el-option v-for="item in sendTelList" :value="item"/>
        </el-select>
      </el-form-item>
    </el-form>

    <el-button style="display: inline-block" type="primary" @click="getAnyList">搜 索</el-button>

    <div style="margin: 0 50px">
      <div id="echarts_box" style="min-width: 1100px;height:500px; display: inline-block"></div>
    </div>

    <div style="width: 100%">
      <p style="width: 1000px"></p>
    </div>

    <div style="width: 100%">
      <div style="width: 900px;height: 300px;margin-left: 150px;margin-bottom: 50px;">
        <p style="color: #00afff;font-weight: bold;">
          根据数据分析，异常号码为：{{ this.sendTel }} 的主机最近最频繁的通话次数为：
        </p>
        <p style="color: red;font-weight: bold;">
          {{ this.allList }}
        </p>
        <p style="color: #ce8a0c;font-weight: bold;">
          该主机号码行为较为反常，可持续追踪
        </p>
      </div>
    </div>
  </div>
</template>
<script>

import echarts from 'echarts'
import {getTypeList, listTel1} from "@/api/bill/tel";

export default {
  components: {},
  props: [],
  data() {
    return {
      sendTel: null,
      form: {
        mobile: '',

      },
      sendTelList: [],
      allList: []
    }
  },


  mounted() {
    this.getAnyList();
  },
  methods: {


    getAnyList() {
      var chartDom = document.getElementById('echarts_box');
      var myChart = echarts.init(chartDom);
      getTypeList(this.sendTel).then(response => {

        this.allList = response.data;
        console.log("response==>", response)
        // const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
        const data = response.data;
        // const data = [["2023-03-10", 200], ["2023-04-10", 400]];
        console.log('data==>', data)
        const dateList = data.map(function (item) {
          return item[0];
        });
        console.log('dateList==>', dateList)
        const valueList = data.map(function (item) {
          return item[1];
        });
        console.log('valueList==>', valueList)

        myChart.setOption({
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
            {
              show: false,
              type: 'continuous',
              seriesIndex: 1,
              dimension: 0,
              min: 0,
              max: dateList.length - 1
            }
          ],
          title: [
            {
              left: 'center',
              text: '通话频率'
            },
            {
              top: '55%',
              left: 'center',
              text: '通话频率'
            }
          ],
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              data: dateList
            },
            {
              data: dateList,
              gridIndex: 1
            }
          ],
          yAxis: [
            {},
            {
              gridIndex: 1
            }
          ],
          grid: [
            {
              bottom: '60%'
            },
            {
              top: '60%'
            }
          ],
          series: [
            {
              type: 'line',
              showSymbol: false,
              data: valueList
            },
            {
              type: 'line',
              showSymbol: false,
              data: valueList,
              xAxisIndex: 1,
              yAxisIndex: 1
            }
          ]
        });
      });
    },

  }
}

</script>
<style>
</style>
